<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<link href="static/css/default/ui.css" rel="stylesheet" type="text/css" />
		<link href="static/css/default/tooltips.css" rel="stylesheet" type="text/css" />
		<link href="static/css/default/portlet.css" rel="stylesheet" type="text/css" />
		<link href="static/css/default/sample.css" rel="stylesheet" type="text/css" />
		<link href="static/js/thirdparty/colorpicker/css/colorpicker.css" rel="stylesheet" type="text/css" />
	</head>
	
    <body>
        <!-- required libraries -->
        <script type="text/javascript" src="static/js/lib/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="static/js/lib/jquery.ui.core.js"></script>
        <script type="text/javascript" src="static/js/lib/jquery.ui.widget.js"></script>
        <script type="text/javascript" src="static/js/lib/jquery.ui.mouse.js"></script>
        <script type="text/javascript" src="static/js/lib/jquery.ui.draggable.js"></script>
        <script type="text/javascript" src="static/js/lib/jquery.ui.droppable.js"></script>
        <script type="text/javascript" src="static/js/lib/jquery.json-2.2.js"></script>
		<script type="text/javascript" src="static/js/lib/jquery.cookie.js"></script>
		<script type="text/javascript" src="static/js/lib/computedStyle.js"></script>
		<script type="text/javascript" src="static/js/lib/styleChangedListener.js"></script>
		<script type="text/javascript" src="static/js/lib/inherit.js"></script>
		<script type="text/javascript" src="static/js/lib/micro-templating.js"></script>
		<script type="text/javascript" src="static/js/lib/kinetic-v3.7.3.js"></script>
		
		<!-- 3rd party library -->
		<script type="text/javascript" src="static/js/thirdparty/colorpicker/colorpicker.js"></script>
		<script type="text/javascript" src="static/js/thirdparty/tooltips.js"></script>
		
        <!-- framework -->
        <script type="text/javascript" src="static/js/framework/base.js"></script>
		<script type="text/javascript" src="static/js/framework/ui.base.js"></script>
		<script type="text/javascript" src="static/js/framework/ui.interfaces.js"></script>
		<script type="text/javascript" src="static/js/framework/ui.controls.js"></script>
		<script type="text/javascript" src="static/js/framework/ui.controls.desktop.js"></script>
		<script type="text/javascript" src="static/js/framework/ui.extras.js"></script>
		<script type="text/javascript" src="static/js/framework/ui.experimental.js"></script>
        <script type="text/javascript" src="static/js/framework/observer.js"></script>
        <script type="text/javascript" src="static/js/framework/plugins.js"></script>
        <script type="text/javascript" src="static/js/framework/page.js"></script>
        <script type="text/javascript" src="static/js/framework/portlet.js"></script>
        <script type="text/javascript" src="static/js/framework/request.js"></script>
        <script type="text/javascript" src="static/js/framework/bootstrap.js"></script>
        <script type="text/javascript" src="static/js/framework/utils.js"></script>
		<script type="text/javascript" src="static/js/framework/memcached.js"></script>
		
		<!-- application bootstrap -->
		
		<!-- application plugins -->
		
		<!-- application portlets -->
		<script type="text/javascript" src="static/js/app/portlets/samples/SamplePortlet.js"></script>
		
		<script type="text/javascript" src="static/js/framework/classNameInjection.js"></script>

		<!-- addons -->

		<!-- entry-point -->
		
		<script type="text/javascript" src="static/js/app/appinfo.js"></script>

        <div id="Application-Main"></div>
		<!-- indicate the application main area, as specified in index.default.js -->
		
		<script type="text/javascript">
			//stage
			var stage = new Stage({id: 'Application-Main'});
			stage.setLayout('vertical');
			var label = undefined;
			var font = new JOOFont();
			font.setBold(true);
			font.setItalic(true);
			
			//button
			label = new JOOLabel({lbl: 'Button'});
			var btn = new JOOButton({lbl: 'Click Me!'});
			btn.addEventListener('click', function(event) {
				var dialog = new JOODialog({width: 500, modal: true});
				stage.addChild(dialog);
				dialog.setTitle('Welcome to JOO');
				dialog.setWidth(500);
				
				var label = new JOOLabel({lbl: 'JOO is a javascript framework, by which programmer can make a website like a traditional application. JOO is a platform for rich client application.'});
				dialog.getContentPane().addChild(label);
				
				var input = new JOOInputBox({lbl: 'Enter your name'});
				var sketch = new Sketch();
				sketch.addChild(input);
				dialog.getContentPane().addChild(sketch);
				
				var textarea = new JOOTextArea();
				var sketch2 = new Sketch();
				sketch2.addChild(textarea);
				dialog.getContentPane().addChild(sketch2);
				
				var checkbox1 = new JOOCheckbox();
				checkbox1.setState(true);
				var sketch3 = new Sketch();
				sketch3.addChild(checkbox1);
				sketch3.addChild(new JOOLabel({lbl: 'Notify me about updates'}));
				dialog.getContentPane().addChild(sketch3);
				
				var checkbox2 = new JOOCheckbox();
				var sketch4 = new Sketch();
				sketch4.addChild(checkbox2);
				sketch4.addChild(new JOOLabel({lbl: 'Notify me about events'}));
				dialog.getContentPane().addChild(sketch4);
				
				var button = new JOOButton({lbl: 'Close'});
				button.access().css('float', 'right');
				button.onclick = function() {
					dialog.close();
				};
				dialog.getContentPane().addChild(button);

				var ctxMenu = dialog.getContextMenu();
				ctxMenu.addItem(new JOOMenuItem({label: 'Click me to alert', command: function() {
					alert('Got it?');
				}}));
				ctxMenu.addItem(new JOOMenuItem({label: 'Click me to close dialog', command: function() {
					dialog.close();
				}}));
				ctxMenu.addChild(new Separator());
				ctxMenu.addItem(new JOOMenuItem({label: 'Click me no effect'}));
				ctxMenu.addItem(new JOOMenuItem({label: 'Click me to hide popup', command: function() {
					ctxMenu.hide();
				}}));
				
				dialog.attachContextMenu();
				
				$(document).click(function(){
					ctxMenu.hide();
				});

				dialog.center();
			});
			stage.addChild(label);
			stage.addChild(btn);
			//btn.setStyle('width', 'auto');
			//btn.setStyle('height', 'auto');
			//btn.setScale(2);
			//btn.setRotation(30);
			//btn.setLocation(100, 200);
			
			//checkbox
			label = new JOOLabel({lbl: 'Checkbox'});
			stage.addChild(label);
			var checkbox = new JOOCheckbox();
			stage.addChild(checkbox);
			
			//select
			label = new JOOLabel({lbl: 'Select'});
			stage.addChild(label);
			var select = new JOOInputSelect();
			stage.addChild(select);
			select.addOption({label: 'Fruit', value: 1});
			select.addOption({label: 'Orange', value: 2});
			select.addEventListener('change', function(e) {
				console.log('change to '+select.getValue().value+' ('+select.getValue().label+')');
			});
			select.setValue(2);
			
			//resizable
			//var resizable1 = new JOOResizableCanvas({txt: 'Resize me 1st!'});
			//stage.addChild(resizable1);
			//resizable1.setX(250);
			
			//var resizable2 = new JOOResizableCanvas({txt: 'Resize me 2nd!'});
			//stage.addChild(resizable2);
			//resizable2.setX(500);
			
			$(document).click(function() {
				stage.deselectAllObjects();
			});
			
			//context menu
			var ctxMenu = stage.getContextMenu();
			var hasDialog = false;
			ctxMenu.addItem(new JOOMenuItem({label: 'About application...', command: function() {
				ctxMenu.hide();
				var dialog = SingletonFactory.getInstance(AboutApplicationDialog);
				if (!hasDialog) {
 					stage.addChild(dialog);
 					hasDialog = true;
				}
				dialog.show();
				dialog.center();
			}}));
			ctxMenu.addItem(new JOOMenuItem({label: 'About JOO Framework 2.0', command: function() {
				ctxMenu.hide();
				window.open("http://jooframework.org/", "_blank");
			}}));
			stage.attachContextMenu(true);
			$(document).click(function(){
				ctxMenu.hide();
			});
			
			//slider
			label = new JOOLabel({lbl: 'Slider'});
			stage.addChild(label);
			var slider = new JOOSlider();
			stage.addChild(slider);
			slider.setValue(50);
			var sliderLabel = new JOOLabel({lbl: 'Slider value: ' + slider.getValue()});
			slider.addEventListener('change', function() {
				sliderLabel.setText('Slider value: ' + Math.floor(slider.getValue()));
			});
			stage.addChild(sliderLabel);
			
			//color picker
			label = new JOOLabel({lbl: 'Color Picker'});
			stage.addChild(label);
			var colorPicker = new JOOColorPicker();
			stage.addChild(colorPicker);
			var pickerLabel = new JOOLabel({lbl: 'Color picked: ' + colorPicker.getValue()});
			colorPicker.addEventListener('change', function() {
				pickerLabel.setText('Color picked: ' + colorPicker.getValue());
			});
			stage.addChild(pickerLabel);
			
			//sprite
			label = new JOOLabel({lbl: 'Sprite'});
			stage.addChild(label);
			var sprite = new JOOSprite({
				src: 'static/images/explosion.png',
				spriteWidth: 48,
				spriteHeight: 48,
				horizontalFramesNo: 33,
				verticalFramesNo: 1,
				framerate: 50,
				loop: 1
			});
			stage.addChild(sprite);
			sprite.play();
			setTimeout(function() {
				sprite.setSpeed(0.3);
			}, 5000);
			setTimeout(function() {
				sprite.setSpeed(1);
			}, 7000);
			
			//menu bar
			label = new JOOLabel({lbl: 'Menu Bar'});
			stage.addChild(label);
			var menuBar = new JOOMenuBar();
			stage.addChild(menuBar);
			var fileMenu = new JOOMenu({label: 'File'});
			menuBar.addItem(fileMenu);
			fileMenu.addItem(new JOOMenuItem({label: 'New'}));
			fileMenu.addItem(new JOOMenuItem({label: 'Open'}));
			fileMenu.addItem(new Separator());
			fileMenu.addItem(new JOOMenuItem({label: 'Close'}));
			fileMenu.addItem(new JOOMenuItem({label: 'Close All'}));
			
			var helpMenu = new JOOMenu({label: 'Help'});
			menuBar.addItem(helpMenu);
			helpMenu.addItem(new JOOMenuItem({label: 'Help Topics'}));
			helpMenu.addItem(new JOOMenuItem({label: 'About'}));
			
			//basic uploader
			var label = new JOOLabel({lbl: 'Basic Uploader'});
			stage.addChild(label);
			var basicUploader = new JOOBasicUploader({name: 'file', endpoint: 'service/upload.php'});
			stage.addChild(basicUploader);
			
			var loadingDialog;
			basicUploader.addEventListener('submit', function() {
				loadingDialog = new JOODialog();
				loadingDialog.setTitle('Uploading file...');
				loadingDialog.addChild(new JOOImage({src: 'static/images/progress_bar.gif'}));
				stage.addChild(loadingDialog);
				loadingDialog.center();
			});
			basicUploader.addEventListener('submitSuccess', function(e) {
				loadingDialog.close();
				alert(e.data);
			});
			
			//advanced uploaderBasic
			var label = new JOOLabel({lbl: 'Advanced Uploader'});
			stage.addChild(label);
			var advancedUploader = new JOOAdvancedUploader({
				name: 'file', 
				endpoint: 'service/upload.php',
				control: new JOOButton({lbl: 'Upload'})
			});
			stage.addChild(advancedUploader);
			
			var loadingDialog;
			advancedUploader.addEventListener('submit', function() {
				loadingDialog = new JOODialog();
				loadingDialog.setTitle('Uploading file...');
				loadingDialog.addChild(new JOOImage({src: 'static/images/progress_bar.gif'}));
				stage.addChild(loadingDialog);
				loadingDialog.center();
			});
			advancedUploader.addEventListener('submitSuccess', function(e) {
				loadingDialog.close();
				alert(e.data);
			});
			
			//tab & toggle button
			var sketchToggle = new Sketch();
			sketchToggle.setLayout('flow');
			label = new JOOLabel({lbl: 'Tab & Toggle Button'});
			stage.addChild(label);
			
			var bold = new JOOToggleBoldButton();
			sketchToggle.addChild(bold);
			var italic = new JOOToggleItalicButton();
			sketchToggle.addChild(italic);
			var underline = new JOOToggleUnderlineButton();
			sketchToggle.addChild(underline);
			
			var sketchToggle2 = new Sketch();
			var flipHoriz = new JOOToggleFlipHorizontalButton();
			sketchToggle2.addChild(flipHoriz);
			var flipVert = new JOOToggleFlipVerticalButton();
			sketchToggle2.addChild(flipVert);
			var alignCenter = new JOOToggleAlignCenterButton();
			sketchToggle2.addChild(alignCenter);
			var alignRight = new JOOToggleAlignRightButton();
			sketchToggle2.addChild(alignRight);
			
			var tabbedPane = new JOOTabbedPane({width: 400, height: 200});
			stage.addChild(tabbedPane);
			tabbedPane.addTab('Tab 1', sketchToggle, undefined, 'Modify text style');
			tabbedPane.addTab('Tab 2', sketchToggle2, undefined, 'Modify text alignment');
			
			//accordion
			label = new JOOLabel({lbl: 'Accordion'});
			stage.addChild(label);
			var accordion = new JOOAccordion({width: 200, height: 200, lbl: 'Default Accordion'});
			stage.addChild(accordion);
			for(var i=0; i<10; i++)
				accordion.getContentPane().addChild(new JOOImage({height: 64, width: 64, src: 'static/images/image-default.png'}));
			
			//ruler
			label = new JOOLabel({lbl: 'Ruler'});
			stage.addChild(label);
			var ruler = new JOORuler({width: 1000, height: 100, initMax: 500, initMin: 50, interval: 10, groupMode: "quarter"});
			ruler.setValue(100);
			stage.addChild(ruler);
			var rulerLabel = new JOOLabel({lbl: 'Current value: '+ruler.getValue()});
			ruler.addEventListener('change', function() {
				rulerLabel.setText('Current value: '+this.getValue());
			});
			stage.addChild(rulerLabel);
			
			//draggable & droppable
			var label = new JOOLabel({lbl: 'Draggable & Droppable'});
			stage.addChild(label);
			
			var toolBox = new Sketch({height: 50});
			var imgIcon = new JOOAvatarIcon({
				src: 'static/images/image-default.png', 
				realObject: {className: JOOImage, config: {width: 64, height: 64}}
			});
			toolBox.addChild(imgIcon);
			
			var imgIcon2 = new JOOAvatarIcon({
				src: 'static/images/draggable_image.gif',
				getRealObject: function() {
					var img = new JOOImage({
						src: 'static/images/draggable_image.gif',
						width: 64,
						height: 64
					});
					DraggableWrapper.wrap(img);
					img.draggable({containment: 'parent'});
					img.startDrag();
					return img;
				}
			});
			imgIcon2.setX(64);
			toolBox.addChild(imgIcon2);
			
			var imgIcon3 = new JOOAvatarIcon({
				src: 'static/images/draggable_image.gif',
				getRealObject: function() {
					var img = new JOOImage({
						src: 'static/images/draggable_image.gif',
						width: 64,
						height: 64
					});
					var advancedUploader = new JOOAdvancedUploader({
						name: 'file', 
						endpoint: 'service/upload.php',
						control: img
					});
					advancedUploader.addEventListener('submitSuccess', function(e) {
						alert(e.data);
					});
					return advancedUploader;
				}
			});
			imgIcon3.setX(128);
			toolBox.addChild(imgIcon3);
			
			stage.addChild(toolBox);
			
			var droppable = new DroppablePanel({width: 400, height: 150});
			droppable.access().addClass('custom-droppable');
			droppable.setLayout('flow');
			stage.addChild(droppable);
			
			var controller = SingletonFactory.getInstance(DragDropController);
			controller.registerDragDrop(imgIcon, [droppable]);
			controller.registerDragDrop(imgIcon2, [droppable]);
			controller.registerDragDrop(imgIcon3, [droppable]);
			
			controller.updateDragDrop();
		</script>
</body>
</html>